<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="/mobile/layui/css/layui.css" />
		<link rel="stylesheet" href="/mobile/css/mobile.css" />
		<script src="/mobile/js/jquery.min.js"></script>
		<script src="/mobile/js/jquery.easing.min.js"></script>
		<script src="/mobile/layui/layui.js"></script>
		<style>
			.layui-form-item {
			    margin-bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="header" style="border-bottom: 1px solid #e5e5e5;">
			<a href="javascript:window.history.go(-1)" class="back iconfont">&#xe679;</a>

			<h3 class="title">在线投稿</h3>
		</div>



		<img src="{$banner.image}" style="width: 100%; height: auto;" >

		<div class="bg_gray_main" style="min-height: calc(100% - 41px);">


			<div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"> 文章标题</label>
				   <div class="layui-input-block">
						<textarea maxlength="50" name="" id="title" style="height: 72px;resize: none;padding: 3px 0 0;" placeholder="多行文本框" class="layui-border-none"></textarea>
						<span id="textarea_num" style="float: right; color: #999; font-size: 12px;">0/50</span>
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"> 文章作者</label>
				   <div class="layui-input-block">
				     <input type="text" name="" id="author" placeholder="请输入作者" class="layui-border-none">
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"> 联系电话</label>
				   <div class="layui-input-block">
				     <input type="text" name="" id="tel" placeholder="请输入联系电话" class="layui-border-none">
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"> 邮箱或微信号</label>
				   <div class="layui-input-block">
				     <input type="text" name="" id="contact" placeholder="请输入邮箱或微信号" class="layui-border-none">
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"> 文件上传</label>
				   <div class="layui-input-block">
				     <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-btn-2">
				         <i class="layui-icon layui-icon-upload"></i> 建议上传word
				       </button>
				       <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
				         附件：
				         <div class="layui-upload-list" id="upload-demo-preview"></div>
				      </blockquote>
				   </div>
				 </div>
			</div>

			<div class="btn">
			  <button type="button" class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius" onclick="submit()">提交</button>
			</div>
		</div>
	</body>
	<script>
	    var upload_files=[];
		$(function(){
			$("#textarea").bind('input propertychange', function() {
				$('#textarea_num').html($(this).val().length + '/50');
			});

		});

		layui.use(function(){
		  var upload = layui.upload;
		  var layer = layui.layer;
		  var element = layui.element;
		  var $ = layui.$;
		  // 多图片上传
		    upload.render({
		      elem: '#ID-upload-demo-btn-2',
		      url: '/api.php/common/upload', // 实际使用时改成您自己的上传接口即可。
		      accept: 'file',
		      exts:'doc|docx|pdf|jpg|png',
		      multiple: true,
		      before: function(obj){
		        // 预读本地文件示例，不支持ie8
		        obj.preview(function(index, file, result){
		          $('#upload-demo-preview').append('<div>'+file.name+'</div>')
		        });
		      },
		      done: function(res){
		        // 上传完毕
		        console.log(res);
				upload_files.push(res.data.url);
		      }
		    });

		});

		function submit(){
		    if($('#title').val().trim()==''){
			    layer.msg('请填写标题',{icon:5});return false;
		    }
		    if($('#author').val().trim()==''){
		  	    layer.msg('请填写作者',{icon:5});return false;
		    }
		    if($('#tel').val().trim()==''){
		  	    layer.msg('请填写联系电话',{icon:5});return false;
		    }
		    if($('#contact').val().trim()==''){
		  	    layer.msg('请填写邮箱或微信号',{icon:5});return false;
		    }
            if(upload_files.length==0){
                layer.msg('请上传附件文档', {icon: 5});
                return false;
            }
            $.ajax({
                  type:"POST",
                  url:"/api.php/index/submit_tougao",
                  dataType:"json",
                  data:{
                      'title':$('#title').val().trim(),
                      'author':$('#author').val().trim(),
                      'tel':$('#tel').val().trim(),
                      'contact':$('#contact').val().trim(),
                      "files":upload_files.join(','),

                  },
                  success:function(res){
                      console.log(res);

                      if(res.code==0){
                          layer.msg(res.msg,{icon:5});

                      }else{
                          layer.msg(res.msg,{icon:6},function(){

            				  window.location.href="{:url('index/home')}";
                          });
                      }
                  }
              });

        }
	</script>
</html>
